<template>
  <div>
    <div>
      <van-nav-bar title="精品汇-厂家精品汇聚平台" fixed
      />
    </div>

      <van-tabs @change="changeTab" v-model="activeKey" >
        <van-tab v-for="index in platformProductCategory" :title="index.name" :key="index.categoryId"  >
          <div v-for="item in shareInfoList" :key="item.shareid">
            <div class="container">
              <div class="columnr" >
                <div class="rownr">
                  <div class="img">
                    <van-image
                      round
                      width="40px"
                      height="40px"
                      :src="item.logo?item.logo:'https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/touxiang.png'"
                    />
                  </div>
                  <div class="name">{{item.agencyname?item.agencyname:item.companyName}}</div>
                </div>

                <div class="content"  @click="viewdetail(item)" v-if="item.agencyid">
                  <p>
                    {{item.content}}
                  </p>
                </div>
                <div  class="content"  @click="viewdetail(item)"  v-html="item.content" v-else>

                </div>

                <div class="active-prizelist"   @click="viewdetail(item)" >
                  <ul class="active-ul">
                    <li class="viewimg" v-for="img in item.images">
                        <van-image
                          width="100%"
                          height="100"
                          :src="img"
                        />
                    </li>
                  </ul>

                </div>
                <div style="padding-top:10px;padding-bottom: 10px;padding-left:20px;color:#B2B2B2;font-size: 14px;">
                  {{ item.fbsj }}
                </div>

              </div>
              <div class="rownr">
                <div style="width: 25%;align-content: center;padding-left: 5%;font-size: 14px;" >
                  <van-icon name="eye-o"  /> 阅 {{item.readnum !=null ?item.readnum : 0 }}
                </div>
                <div style="width: 25%;align-content: center;padding-left: 3%;font-size: 14px;" @click="doShouCang(item)">
                  <van-icon name="star-o" :color="item.scyxbz == '1' ?'#FFB929':''"/> 收藏  {{item.scnum  ? item.scnum :0 }}
                </div >
                <div style="width: 25%;align-content: center;padding-left: 3%;font-size: 14px;" @click="viewdetail(item)">
                  <van-icon name="chat-o" /> 回复 {{item.lynum  ? item.lynum :0 }}
                </div>
                <div style="width: 25%;align-content: center;padding-left: 1%;font-size: 14px;" @click="doDianZan(item)">
                  <van-icon name="good-job-o" :color="item.dzyxbz == '1' ?'#FFB929':''" /> 点赞 {{item.lynum  ? item.lynum :0 }}
                </div>
              </div>

            </div>
          </div>
        </van-tab>
      </van-tabs>

      <div class="floating-button">
        <div style="font-size: 14px;color: white;" @click="toFabu" >
          发布
        </div>

      </div>
  </div>
</template>
<script>
  import { queryPlatformProductCategory, queryProductInfo,queryShareInfo,addShareStoreInfo,editShareReadNum} from 'api/api'
  import {dateFormat} from '../../utils/DateUtil'
  import { Skeleton  ,Toast} from 'vant'

  export default {
    name: 'Search',
    data() {
      return {
        loading:true,
        shareInfoList:[],
        platformProductCategory:[],
        productCategory: [],
        productCategoryXl: [],
        productList: [],
        activeKey: 0,
        clickXlData: { categoryId: '' },
        clickDlData: { categoryId: '' },
        fileList:[
          { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
          {
            url: 'https://img01.yzcdn.cn/vant/sand.jpg'
          },
          {
            url: 'https://img01.yzcdn.cn/vant/tree.jpg'
          },{
            url: 'https://img01.yzcdn.cn/vant/tree.jpg'
          },{
            url: 'https://img01.yzcdn.cn/vant/tree.jpg'
          },{
            url: 'https://img01.yzcdn.cn/vant/tree.jpg'
          }
        ],
        scolor:true,
        dcolor:true,
        pageNum:1,
        pageSize:10,
      }
    },
    created() {
      this.pageNum = 1
      const agencyId = this.$store.getters.agencyId
      this.agencyid = agencyId
      this.shareid = this.$route.query.shareid
      this.loading = false;
      this.queryPlatformProductCategory()
      this.queryShareInfo()
      let that = this
      window.onscroll = function(){
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop+windowHeight==scrollHeight){
          //写后台加载数据的函数
          that.pageNum = that.pageNum + 1
          that.queryShareInfo()
        }
      }
    },
    methods: {

      queryPlatformProductCategory() {
        const param = {}
        queryPlatformProductCategory(param).then(response => {
          this.platformProductCategory = [{ categoryId: '', name: '全部' }, ...response.data]
        })
      },
      toProductInfo(companyId, productId) {
        this.$router.push({ path: '/product', query: { companyId: companyId, productId: productId }})
      },

      toFabu() {
        this.$router.push({ path: '/fabu', query: {}})
      },

      viewdetail(item){
        debugger
        let shareid = item.shareid
        let readnum = item.readnum
        if(readnum){
          readnum = parseInt(readnum) + 1
        }else{
          readnum = 1
        }
        let param = {shareid:shareid,readnum:readnum}
        editShareReadNum(param).then(res =>{
          if(res.code == 200 ){

          }
        })
        this.$router.push({path:'/fbinfo',query:{shareid:shareid}})

      },

      changeTab(e){
        this.activeKey = e
        this.pageNum = 1
        this.shareInfoList = []
        let that = this
        const param = {spdl:this.platformProductCategory[e].categoryId,pageNum:that.pageNum,pageSize:that.pageSize}
        const list = []
          queryShareInfo(param).then(res =>{
            if(res.code == 200 ){
              console.log(res.rows)
              if(res.rows){
                let lenth = res.rows.length
                for(var i=0;i<lenth;i++){
                  if(res.rows[i].images){
                    res.rows[i].images =  res.rows[i].images.split(',');
                  }
                  res.rows[i].fbsj = res.rows[i].fbsj.replace('T',' ').replace('.000+0800',' ')
                  list.push(res.rows[i])
                }
              }
              this.shareInfoList = that.pageNum ==1 ? list:that.shareInfoList.concat(list)
            }
          })


      },

      queryShareInfo(){
        const param = {pageNum:this.pageNum,pageSize:this.pageSize}
        const list = []
        let that = this
        console.log(param)
        queryShareInfo(param).then(res =>{
          if(res.code == 200 ){
            console.log(res.rows)
            if(res.rows){
              let lenth = res.rows.length
              for(var i=0;i<lenth;i++){
                if(res.rows[i].images){
                  res.rows[i].images =  res.rows[i].images.split(',');
                }
                res.rows[i].fbsj = res.rows[i].fbsj.replace('T',' ').replace('.000+0800',' ')
                list.push(res.rows[i])
              }
            }
            that.shareInfoList = that.pageNum == 1 ? list:that.shareInfoList.concat(list)
          }
        })
      },

      doShouCang(item){
        let agencyid = this.agencyid
        let shareid = item.shareid
        console.log(item)
        if(item.scyxbz == '1'){
          item.scyxbz = '0'
          let param = {agencyid:agencyid,shareid:shareid,scyxbz:'0'}
          addShareStoreInfo(param).then(res =>{
            if(res.code == 200 ){
              Toast.success('取消收藏')
            }
          })
        }else{
          item.scyxbz = '1'
          let param = {agencyid:agencyid,shareid:shareid,scyxbz:'1'}
          addShareStoreInfo(param).then(res =>{
            if(res.code == 200 ){
              Toast.success('收藏成功')
            }
          })
        }

      },

      doDianZan(item){
        let agencyid = this.agencyid
        let shareid = item.shareid

        if(item.dzyxbz == '1'){
          item.dzyxbz = '0'
          let param = {agencyid:agencyid,shareid:shareid,dzyxbz:'0'}
          addShareStoreInfo(param).then(res =>{
            if(res.code == 200 ){
            }
          })
        }else{
          item.dzyxbz = '1'
          let param = {agencyid:agencyid,shareid:shareid,dzyxbz:'1'}
          addShareStoreInfo(param).then(res =>{
            if(res.code == 200 ){
            }
          })
        }
      }

    }
  }
</script>

<style scoped>

  .innerBox{
    overflow-y: scroll;
  }
  .cpbg{
    display: flex;
    padding:5px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .columnr{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .rownr{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .name{
    padding-top: 13px;
    padding-left: 10px;
    font-size: 20px;
    color: #466BAC;
  }

  .img{
    padding-top: 10px;
    padding-left: 10px;
  }

  .container{
    background-color: #ffffff;
    margin-top: 5px;
    width: 100%;
    height: auto;
    padding-bottom: 10px;
  }

  .content{
    font-size: 16px;
    padding:10px;
    text-indent: 2em;
  }

  .viewimg{
    width: 31%;
    padding-left: 5px;
    padding-right: 5px;
  }

  .floating-button {
    position: fixed;
    right: 50px;
    bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:#FF6900;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    font-size: 14px;
  }

  .active-prizelist .active-ul{
    width: 100%;
    height: 100px;
    display: inline;
    white-space: nowrap;
    overflow-x:scroll;
    float:left;
    overflow-y:hidden;
    background-color: white;
  }

  .active-prizelist .active-ul::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .active-prizelist .active-ul li{
    display:inline-block;
    margin:0;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }


</style>
